<template>
  <div id="pingzhengfengmian-table-page">
    <div id="pingzhengfengmian-table">
      <!-- 搜索框 -->
      <csearchbox :option="searchOptions"
                  @getQuery="getQuery"
                  @searchPage="searchPage"/>
      
      <div v-html="htmlData" id="pingzhengfengmian-table-box"></div>
      <div style="margin-top:50px;text-align:center;">
        <el-button @click="print">打 印</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getLodop } from '@/utils/lodopFuncs'
import csearchbox from '@/components/csearchbox'
import { chargeEvidenceStatisticsTable } from '@/api/bussines'
export default {
  components:{
    csearchbox,//搜索框
  },
  data(){
    return{
      abatementNumber:'',//减免具数
      benefitTotalCharge:'',//减免总计
      chargeEvidenceViewItems:[],//收费凭证服务项目列表
      cremationNumber:'',//火化具数
      realityTotalCharge:'',//实收总计
      chargeDate:'',//收款日期
      searchOptions:{
        clearBtn:false,
        items:[
          {
            type:'times',
            key:['settleStartTime','settleEndTime'],
            label:'结算时间',
            clearable:false
          },
        ]
      },
      htmlData1:`<div style='width:720px;'>
                  <div style='font-size:20px;font-weight: bold; width: 100%;height: 30px;line-height:30px;text-align: center'>
                    临沂市殡仪馆收费凭证封面
                  </div>
                  <div style='height:20px;line-height:20px'>
                    火化具数:`,
      htmlData2:`&nbsp;&nbsp;减免具数:`,
      htmlData3:`&nbsp;&nbsp;实收总计:`,
      htmlData4:`&nbsp;&nbsp;减免总计:`,
      htmlData5:`<span style='float:right'>收款日期:`,
      htmlData6:`</span>
                  </div>
                  <table align='center' cellpadding='0' cellspacing='0' width='100%' border='1' style='text-align: center ;border-collapse: collapse;font-size: 10pt;'>
                    <tr style='height:25px;'>
                      <td style='width:100px;'>项目</td>
                      <td style='width:40px;'>实收</td>
                      <td style='width:40px;'>减免</td>
                      <td style='width:100px;'>项目</td>
                      <td style='width:40px;'>实收</td>
                      <td style='width:40px;'>减免</td>
                      <td style='width:100px;'>项目</td>
                      <td style='width:40px;'>实收</td>
                      <td style='width:40px;'>减免</td>
                      <td style='width:100px;'>项目</td>
                      <td style='width:40px;'>实收</td>
                      <td style='width:40px;'>减免</td>
                    </tr>`,
      htmlData8:`</table>
                  <div style='margin-top:10px;'>
                    实收总计(大写):
                  `,
      htmlData9:`</div>
                </div>`,
      htmlData:``,
    }
  },
  methods:{
    //拼接html字符串
    getHtmlData(){
      this.htmlData=this.htmlData1+this.cremationNumber+
      this.htmlData2+this.abatementNumber+
      this.htmlData3+this.realityTotalCharge+
      this.htmlData4+this.benefitTotalCharge+
      this.htmlData5+this.chargeDate+
      this.htmlData6+this.getTableVal()+
      this.htmlData8+this.digitUppercase(this.realityTotalCharge)+
      this.htmlData9
    },
    //拼接表格内容
    getTableVal(){
      let str=``
      let tr_st=`<tr style='border-style: none;height:25px;'>`
      let tr_end=`</tr>`
      str+=tr_st
      let items=this.chargeEvidenceViewItems
      for(let i=0;i<items.length;i++){
        let current=items[i]
        str+=`<td style='width:100px;'>`
        str+=current.itemName
        str+=`</td>`
        str+=`<td style='width:40px;'>`
        str+=current.realityCharge
        str+=`</td>`
        str+=`<td style='width:40px;'>`
        str+=current.benefitCharge
        str+=`</td>`
        if(i%4===3){
          str+=`</tr><tr style='border-style: none;height:25px;'>`
        }
      }
      let val=items.length%4
      let td=`<td style='width:100px;'></td><td style='width:40px;'></td><td style='width:40px;'></td>`
      if(val===0){
        str+=td+td+td+td
      }else if(val===1){
        str+=td+td+td
      }else if(val===2){
        str+=td+td
      }else if(val===3){
        str+=td
      }
      str+=tr_end
      return str
    },
    //收费金额大写
    digitUppercase(n) {
      var fraction = ['角', '分'];
      var digit = [
        '零', '壹', '贰', '叁', '肆',
        '伍', '陆', '柒', '捌', '玖'
      ];
      var unit = [
        ['元', '万', '亿'],
        ['', '拾', '佰', '仟']
      ];
      var head = n < 0 ? '欠' : '';
      n = Math.abs(n);
      var s = '';
      for (var i = 0; i < fraction.length; i++) {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
      }
      s = s || '整';
      n = Math.floor(n);
      for (var i = 0; i < unit[0].length && n > 0; i++) {
        var p = '';
        for (var j = 0; j < unit[1].length && n > 0; j++) {
          p = digit[n % 10] + unit[1][j] + p;
          n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
      }
      return head + s.replace(/(零.)*零元/, '元')
        .replace(/(零.)+/g, '零')
        .replace(/^整$/, '零元整');
    },
    //获取query
    getQuery(query){
      this.query={...query}
    },
    //搜索按钮及清空均会调用该事件,已完成
    searchPage(){
      this.onLoad();
    },
    //页面加载事件
    onLoad(){
      let params={
        ...this.query
      }
      chargeEvidenceStatisticsTable(params).then(res=>{
        let {abatementNumber,cremationNumber,realityTotalCharge,benefitTotalCharge,chargeEvidenceViewItems,chargeDate}=res.data
        this.abatementNumber=abatementNumber
        this.cremationNumber=cremationNumber
        this.chargeDate=chargeDate
        this.realityTotalCharge=realityTotalCharge?realityTotalCharge:'0'
        this.benefitTotalCharge=benefitTotalCharge?benefitTotalCharge:'0'
        this.chargeEvidenceViewItems=chargeEvidenceViewItems

        this.getHtmlData()
      })
    },
    print(){
      let this_print = this;
      let LODOP = getLodop();
      if (LODOP == null || !LODOP) {
        this_print.$.messager.alert(
          "系统提示",
          "您的浏览器不支持打印控件，请用IE重试或安装打印控件后重试"
        );
        return;
      }


      //纸张
      LODOP.SET_PRINT_PAGESIZE(1, 0,0, "A4");
      //设置字体
      LODOP.SET_PRINT_STYLE("FontSize", 11);
      //调用打印控件进行测试
      // LODOP.ADD_PRINT_BARCODE("4mm", "160mm", "28mm", "28mm", "QRCode", recCode);
      // LODOP.SET_PRINT_STYLEA(0, "QRCodeVersion", 2);
      LODOP.SET_PRINT_STYLEA(0, "DataCharset", "UTF-8");
      LODOP.ADD_PRINT_HTM( 10,20,"100%",600, this.htmlData);
      // LODOP.ADD_PRINT_TEXT(50, "15mm", 500, 25, "业务编号：" + businessCode);
      // LODOP.ADD_PRINT_TEXT(70, "15mm", 600, 25, "逝者姓名：" + deadName + ",  依次付款方式：" + selltedType + "\n收费日期：" + businessTime.slice(0, 19).replace('T', ' '));
      LODOP.SET_SHOW_MODE("SHOW_SCALEBAR", false);
      //打印预览
      LODOP.PREVIEW();
    },
  },
}
</script>

<style lang='scss'>
#pingzhengfengmian-table-page{
  height: 100%;
  padding: 20px;
  #pingzhengfengmian-table{
    background: #fff;
    border-radius: 10px;
    height: 100%;
    padding: 20px;
    #pingzhengfengmian-table-box>div{
      width: 100% !important;
      table,tr,td{
        border: 1px solid #000;
        padding: 0;
      }
      table{
        td{
          line-height: 30px;
        }
        td[rowspan]{
          vertical-align:middle;
        }
      }
    }
  }
}

</style>